<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue练习</title>
	<link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
	<style>
		*{
    margin: 0;
    padding: 0;
}
html, body{
    height: 100%;
}

#app{

    height: 900px;
    overflow: scroll;
}
.scroll-wrapper{
    margin: 0;
    padding: 0;
    list-style: none;

}
.scroll-wrapper li{
    line-height: 120px;
    font-size: 60px;
    text-align: center;
}
	</style>
</head>
<body>

<div id="app">
	 <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded"
                 @top-status-change="handleTopChange" ref="loadmore">
        <ul class="scroll-wrapper">
            <li v-for="item in list" @click="itemClick(item)">{{ item }}</li>
        </ul>

    </mt-loadmore>
</div>

<template id="fuqin">
	<div class="fuqin">
		<p @click="dianji">{{shuju}}</p>
	</div>
</template>

<template id="chachao">
	<div class="chachao">
		<slot name="ppp"></slot>
	</div>
</template>





<script src="lib/vue.js"></script>
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
<script>


	
	new Vue({
		el: "#app",
		data:{
			list: [],
            allLoaded: false,
            topStatus: ''
		},
		computed:{
			
		},
		components:{
			
		},
		methods:{
			 // loadTop: function () {  // 刷新数据的操作
    //             var self = this;
    //             setTimeout(function () {
    //                 self.list.splice(0, self.list.length);
    //                 var i =0, len=10;
    //                 for (; i< len; i++){
    //                     self.list.push('demo' + i);
    //                 }
    //                 self.$refs.loadmore.onTopLoaded();
    //             }, 2000);
    //         },
            loadBottom: function () { // 加载更多数据的操作
                //load data

                //this.allLoaded = true;// 若数据已全部获取完毕
                var self = this;
                setTimeout(function () {
                    var i =0; len = 10;
                    for (; i< len; i++){
                        self.list.push('demo' + i);
                    }
                    self.$refs.loadmore.onBottomLoaded();
                }, 2000);

            },
            handleTopChange: function (status) {
                this.topStatus = status;
            },
            itemClick: function (data) {
                console.log('item click, msg : ' + data);
            },
            jiazai: function(){
            	var i =0, len=10;
            		for (; i< len; i++){
               			 this.list.push('demo' + i);
           			 }
            }
		},
		created(){
			this.jiazai();
		}
	});
</script>
</body>
</html>